<template>
    <el-container>
        <el-header style="border-bottom: 1px solid #64b587be;height:50px;background-color: #41B883;">
            <el-row :span="20" style="margin: 8px 10px;">
                <el-col :span="1">
                    <a style="font-size: 30px;">
                        <i class="el-icon-arrow-left" @click="goTo()" style="color:white;"></i>
                    </a>
                </el-col>
                <el-col :span="10" :offset="7">
                    <div style="color:white;">支付宝账号</div>
                </el-col>
                <el-col :span="1" :offset="4">
                    <a style="font-size: 30px;">
                        <i class="el-icon-warning-outline" style="color:white;"></i>
                    </a>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <div class="cent">
                <el-row>
                    当前手机号（可用于登录）
                </el-row>
                <el-row style="margin-top:20px" 
                v-for="nums in num" v-bind:key="nums">{{nums}}
                </el-row>
                <el-button type="primary" @click="change()"
                style="width:300px;margin-top:50px;font-size:22px">更换手机号
                </el-button>
            </div>
        </el-main>
    </el-container>
</template>

<script>
export default({
    name:"Account",
    data() {
        return{
            num:["12345678910"],
        }
    },
    methods:{
        goTo(){
            this.$router.push({path:'/persons'})
        },
        handleChange(val) {
            console.log(val);
        },
        change(){
            this.$prompt('请输入',{
                inputPattern: /^[0-9]{11}$/,center:true
            }).then(({ value }) => {
                this.num.pop();
                this.num.push(value);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入',
                    center: true
                });       
            });
        }
    }
})
</script>

<style scoped>
    .el-container{
        height: 812px;
        width: 375px;
        display: flex;
        font-size: 25px;
        /*background-color: wheat;*/
    }

    .el-header,.el-main{
        /*background-color: #64b587be;*/
        padding: 0;
    }

    .el-main{
        border-top: 1px solid #64b5873f;
        width: 100%;
        background-color: white;
    }

    .cent{
        margin-top: 80px;
        text-align:center;
        font-size: 22px;
    }
        
</style>